import { StyleSheet } from "react-native";
import { Color } from "../common";

const LoginStyles = StyleSheet.create({
  loginPage: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  },
  loginPageBg: {
    position: "absolute",
    width: "100%",
    height: "100%"
  },
  loginMainContent: {
    paddingTop: 100,
    position: "absolute",
    top: 0,
    zIndex: 99,
    width: "100%"
  },
  logo: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    paddingTop: 10,
    marginBottom: 70,
    fontSize: 40,
    color: "white"
  },
  logoImg: {
    width: 80,
    height: 80,
    borderRadius: 40,
    overflow: "hidden"
  },
  inputContainer: {
    position: "relative",
    flexDirection: "row",
    width: "90%",
    height: 45,
    backgroundColor: "#fff",
    borderRadius: 10,
    overflow: "hidden",
    marginLeft: "5%",
    marginBottom: 30
  },
  inputItem: {
    flex: 1,
    paddingLeft: 10,
    paddingRight: 10
  },
  codeButton: {
    width: 80,
    marginTop: 8,
    marginRight: 5,
    height: 30,
    lineHeight: 30,
    textAlign: "center",
    alignItems: "center",
    borderRadius: 30,
    backgroundColor: "#44a7d5",
    fontSize: 12,
    color: "#fff"
  },
  codeText: {
    textAlign: "center",
    lineHeight: 30,
    width: 80,
    height: 30,
    fontSize: 12,
    color: "#fff"
  },
  leftItem: {
    justifyContent: "center",
    alignItems: "center",
    width: 55,
    height: 45,
    alignItems: "center",
    lineHeight: 45
  },
  loginButton: {
    width: "90%",
    marginLeft: "5%",
    backgroundColor: Color,
    height: 45,
    lineHeight: 45,
    textAlign: "center",
    overflow: "hidden",
    color: "#fff",
    borderRadius: 10
  }
});

export default LoginStyles;
